掌握IScroll技巧：实现流畅的上拉加载与下拉刷新功能

"header">iScroll
"wrapper">
    
"scroller">
    
"pullDown" class="">
class="pullDownLabel">
        
class="pulldown-tips">↓下拉刷新
        
"list">
            
Pretty row 1
            
Pretty row 2
            
Pretty row 3
            
Pretty row 4
            
Pretty row 1
            
Pretty row 2
            
Pretty row 3
            
Pretty row 4
            
Pretty row 1
            
Pretty row 2
            
Pretty row 3
            
Pretty row 4
            
Pretty row 1
            
Pretty row 2
            
Pretty row 3
            
Pretty row 4
        
        
"pullUp" class="">
        
class="pullUpLabel">加载更多
        
    

 
"footer">

　　　　 var myScroll,
        pullDown = $("#pullDown"),
        pullUp = $("#pullUp"),
        pullDownLabel = $(".pullDownLabel"),
        pullUpLabel = $(".pullUpLabel"),
        container = $('#list'),
        loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新

        pullDown.hide();
        pullUp.hide();
        myScroll = new IScroll("#wrapper", {
            scrollbars: true,
            mouseWheel: false,
            interactiveScrollbars: true,//用户是否可以拖动滚动条
            shrinkScrollbars: 'scale', //按比例的收缩滚动条
            fadeScrollbars: true,  //是否渐隐滚动条
            scrollY:true,
            probeType: 2, //probeType：2  滚动时每隔一定时间触发
            bindToWrapper:true //光标、触摸超出容器时，是否停止滚动
        });
        myScroll.on("scroll",function(){
            if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){
                if(this.y > 60){//下拉刷新操作
                    $(".pulldown-tips").hide();
                    pullDown.addClass("refresh").show();
                    pullDownLabel.text("松手刷新数据");
                    loadingStep = 1;
                    myScroll.refresh();
                // 上拉加载
                }else if(this.y <(this.maxScrollY - 20)){//上拉加载更多
                    pullUp.addClass("refresh").show();
                    pullUpLabel.text("↑上拉加载");
                    loadingStep = 1;
                    pullUpAction();
                }
            }
        });
        // 下拉刷新
        myScroll.on("scrollEnd",function(){
            if(loadingStep == 1){
                if( pullDown.attr("class").match("refresh") ){//下拉刷新操作
                    pullDown.removeClass("refresh").addClass("loading");
                    pullDownLabel.text("正在刷新");
                    loadingStep = 2;
                    pullDownAction();
                }
            }
        });

　　　　　　function pullDownAction(){
            var li;
            setTimeout(function(){
                $.ajax({
                  type: 'GET',
                  url: './test.php',
                  dataType: 'json',
                  timeout: 300,
                  success: function(data){
                    li = "
"+ data +"
";
                    container.prepend(li);
                  },
                  error: function(xhr, type){
                    alert('Ajax error!')
                  }
                })
                pullDown.attr('class','').hide();
                myScroll.refresh();
                loadingStep = 0;
                $(".pulldown-tips").show();
            },500);
        }
        function pullUpAction(){
            setTimeout(function(){
                $.ajax({
                  type: 'GET',
                  url: './test.php',
                  dataType: 'json',
                  timeout: 300,
                  success: function(data){
                    li = "
"+ data +"
";
                    container.append(li);
                  },
                  error: function(xhr, type){
                    alert('Ajax error!')
                  }
                })
                pullUp.attr('class','').hide();
                myScroll.refresh();
                loadingStep = 0;
            },500);
        }
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);